<template>
<div class="page">
  <div class="banner"></div>
  <div class="rule"></div>
  <div class="value">
   <div class="con">
     <span class="icon"></span><span class="name">貢獻值：</span><span class="num">99.999</span>
   </div>
  </div>
</div>
</template>

<script>
export default {
  name: "contribute"
}
</script>

<style scoped lang="less">
.banner{
  background: url('@/assets/contribute/banner.png') no-repeat center;
  background-size: cover;
}
.rule{
  background: url('@/assets/contribute/rule.png') no-repeat center;
  background-size: cover;
  width: 400px;
  height: 200px;
  border-radius: 6px;
  margin-top: 14px;
}
.value{
  display: flex;
  .con{
    display: flex;
    justify-content: center;
    border-radius: 20px;
    background: #223354;
    margin:16px auto 0;
    align-items: center;
    font-weight: 700;
    font-size: 24px;
    padding:0 11px;
    height: 38px;
    
  }
  .icon{
    width: 21px;
    height: 20px;
    background: url("@/assets/contribute/zs.png") no-repeat center;
    background-size: cover;
  }
  .name{
    color:#FDAF19;
    margin-left: 5px;
  }
  .num{
    color:#fff;
  }
}
</style>